<!--
  * 目录 表单 弹窗
  * 
  * @Author:    1024创新实验室-主任：卓大 
  * @Date:      2022-08-21 19:52:43 
  * @Wechat:    zhuda1024 
  * @Email:     lab1024@163.com 
  * @Copyright  1024创新实验室 （ https://1024lab.net ），Since 2012 
-->
<template>
  <div>
    <a-card title="我的项目">
      <a-button type="primary" style="float: right" @click="showCreateModal">创建项目</a-button>
      <a-modal v-model:open="open" :title="modalTitle" @ok="handleOk">
        <a-form ref="formRef" :model="formState" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-item ref="name" label="项目名称" name="name" placeholder="请填写没项目名称">
            <a-input v-model:value="formState.name" />
          </a-form-item>
          <a-form-item label="所属行业" name="region">
            <a-select v-model:value="formState.region" placeholder="请选择所属行业">
              <a-select-option :value="1">工业互联网</a-select-option>
              <a-select-option :value="2">智慧农业</a-select-option>
              <a-select-option :value="3">教育</a-select-option>
              <a-select-option :value="4">新能源</a-select-option>
              <a-select-option :value="5">智能制造</a-select-option>
              <a-select-option :value="6">智慧城市</a-select-option>
              <a-select-option :value="7">智慧医疗</a-select-option>
              <a-select-option :value="8">其他领域</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="项目描述" name="desc" placeholder="请输入项目描述">
            <a-textarea v-model:value="formState.desc" />
          </a-form-item>
        </a-form>
      </a-modal>
      <div style="width: 700px; height: 250px; border: 1px solid #d2dce3">
        <p style="font-weight: bold; font-weight: 700; font-size: 18px; margin-left: 15px; margin-top: 15px">崇明教育局</p>
        <p style="font-size: 18px; margin-left: 15px; margin-top: 15px">崇明教育局</p>
        <div style="display: flex">
          <div style="margin-left: 30px">
            <p style="color: #a1a6ab">设备总数</p>
            <p style="font-weight: 700; font-size: 18px">2</p>
          </div>
          <div style="margin-left: 180px">
            <p style="color: #a1a6ab">应用总数</p>
            <p style="font-weight: 700; font-size: 18px">2</p>
          </div>
          <div style="margin-left: 150px">
            <p style="color: #a1a6ab">设备离线总数</p>
            <p style="font-weight: 700; font-size: 18px">2</p>
          </div>
        </div>
        <div style="display: flex">
          <div style="margin-left: 15px">
            <span style="color: #a1a6ab">创建时间: </span>
            <span>2024-12-05 11:41:39</span>
          </div>
          <div style="margin-left: 150px">
            <span style="color: #a1a6ab">创建时人: </span>
            <span>超级管理员</span>
          </div>
          <EditOutlined style="margin-left: 100px; color: #1677ff; font-size: 18px" @click="openEditModal" />
          <a-popconfirm  title="崇明教育局" ok-text="确认" cancel-text="取消" description="你确定要删除此项目吗?"  @confirm="confirm" @cancel="cancel">
            <DeleteOutlined style="margin-left: 10px; color: red; font-size: 18px" />
          </a-popconfirm>
        </div>
      </div>
    </a-card>
  </div>
</template>
<script setup>
  import { reactive, ref, toRaw } from 'vue';
import { message } from 'ant-design-vue';
// import { myprojecthomeApi } from '/@/api/business/myproject/myprojecthome-api';
  const confirm = (e) => {
    console.log(e);
    message.success('删除成功');
  };
  const cancel = (e) => {
    console.log(e);
  };

  const formRef = ref();
  const formState = reactive({
    name: '',
    region: undefined,
    desc: '',
      address: '',//地址
      longitude:'',//经度
      latitude:'',//纬度
      socialCreditCode:'', //社会信用代码
      code:'',//编码
      district:'',//区县
      townshipId:'', //街道
      contactPerson:'',//联系人
      contactNumber:'',//联系电话
      remarks:'',//备注
      pollutionPermit:'',//排污许可
      legalPersonStatus:'',//法人状态
      legalPersonName:'',//法人名称
  });
  const rules = {
    name: [
      {
        required: true,
        message: '项目名称不能为空',
        trigger: 'change',
      },
    ],
    region: [
      {
        required: true,
        message: '所属行业不能为空',
        trigger: 'change',
      },
    ],

    desc: [
      {
        required: true,
        message: '项目秒速不能为空',
        trigger: 'blur',
      },
    ],
  };
  const open = ref(false);
  const modalTitle = ref();
  const labelCol = { span: 6 };
  const wrapperCol = { span: 14 };
  // 创建项目弹框
  const showCreateModal = () => {
    modalTitle.value = '创建项目';
    formState.value = { name: '', region: null, desc: '' }; // 清空表单数据
    open.value = true;
  };
  // 编辑项目弹框
  const openEditModal = () => {
    modalTitle.value = '编辑项目';
    formState.value = { ...getExistingProjectData() }; // 填充表单数据
    open.value = true;
  };
  // 提交表单的处理函数
  const handleOk = (e) => {
    if (modalTitle.value === '创建项目') {
      createProject();
    } else if (modalTitle.value === '编辑项目') {
      editProject();
    }
  };

  // 模拟获取已有项目数据，替换为实际获取的项目数据
  const getExistingProjectData = () => {
    return {
      name: '已存在的项目',
      region: 2,
      desc: '这是一个描述',
    };
  };

  // 创建项目的函数
  const createProject = () => {
    console.log('创建项目:', formState.value);
  };

  // 编辑项目的函数
  const editProject = () => {
    console.log('编辑项目:', formState.value);
  };
</script>
<style></style>